<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <input placeholder="搜索关键字" id="search" @change="searchChange" />
    <tree :nodes="bigData" :setting="setting" @onCreated="handleCreated" />
  </div>
</template>

<script>
import tree from "vue-giant-tree";
import bigData from "../mock/big-tree.json";

export default {
  name: "HelloWorld",
  components: {
    tree
  },
  data() {
    return {
      //ztree对象
      ztreeObj: null,
      //ztree配置，参照ztree官网的配置
      setting: {
        view: {
          fontCss: function(treeId, treeNode) {
            return treeNode.searchChange ? { color: "red" } : "";
          }
        },
        check: {
          //树是否带复选框或者单选框
          enable: true
        },
        data: {
          simpleData: {
            //是否使用简单数据模式
            enable: true,
            //树节点id，一般是后台数据库主键
            idKey: "id",
            //父级id
            pIdKey: "pid"
            // rootPId: "0"
          }
        },
        //ztree回调函数
        callback: {
          //树选择事件
          // onCheck: this.ztreeOnCheck,
          // onNodeCreated: this.zTreeOnNodeCreated,
          onClick: this.onClick,
          onCheck: this.onCheck
        }
      },
      msg: "巨树",
      bigData: bigData.data,
      bigDataOld: bigData.data,
      expandNode: []
    };
  },
  methods: {
    onClick(evt, treeId, treeNode) {
      console.log("onClick success ...... 点击 ");
    },
    onCheck(evt, treeId, treeNode) {
      console.log("onCheck success ...... 复选框");
    },
    handleCreated(ztreeObj) {
      console.log(" handleCreated  loading success ...... ");
      this.ztreeObj = ztreeObj;
      // onCreated 中操作ztreeObj对象展开第一个节点
      // ztreeObj.expandNode(ztreeObj.getNodes()[0], true);
    },

    searchChange(e) {
      var value = e.target.value;
      console.log("searchChange success ...... " + value);
      this.bigData = this.bigDataOld;
      if (value) {
        let nodeList = this.ztreeObj.getNodesByParamFuzzy("name", value); //模糊搜索
        this.bigData = nodeList;
      }
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.hello {
  width: 400px;
  margin: 10px auto;
  height: 500px;
  overflow: hidden;
  overflow-y: auto;
}
</style>
